<template>
  <el-popover
    ref="popover"
    placement="bottom"
    :title="'批量修改-' + column.title"
    width="200"
    trigger="click"
  >
    <span slot="reference">
      <i class="iconfont icon-piliangbianji batch-icon pointer" />
    </span>
    <template slot="default">
      <div class="batch-edit-block">
        <erp-form-item
          v-for="item in items"
          :key="item.field"
          :xs-col="col"
          :sm-col="col"
          :md-col="col"
          :lg-col="col"
          :xl-col="col"
          :item="item"
          :value="initForm[item.field]"
          :form="initForm"
          :show-label="false"
          @update-field="handleUpdateField"
          @value-change="handleValueChange"
        />
        <div class="footer">
          <el-button
            type="primary"
            @click="confirm"
          >
            设置
          </el-button>
          <el-button
            type="default"
            @click="cancel"
          >
            取消
          </el-button>
        </div>
      </div>
    </template>
  </el-popover>
</template>

<script>
import Vue from 'vue';
import {Button, Input, Popover} from "element-ui";
import ErpFormItem from '@/components/erp/ErpListForm/ErpFormItem';
import {cloneJson} from "../../utils";

Vue.use(Popover);
Vue.use(Input);
Vue.use(Button);

/**
 * 表格头部批量编辑
 * @author maolin
 */
export default {
  name: "BatchEdit",
  components: {
    ErpFormItem,
  },
  props: {
    /**
     * 值类型 可选[number/string]
     * @public
     */
    valueType: {
      type: String,
      default: 'number'
    },
    /**
     * 列配置
     * ```ts
     * export class ColumnInfo {
        title: string;
        width: number | string;
        minWidth: number | string;
        resizable: boolean;
        fixed: string;
        align: ColumnAlign;
        headerAlign: ColumnAlign;
        footerAlign: ColumnAlign;
        property: string;
        type: string;
        sortable: boolean;
        treeNode: boolean;
        filters: ColumnFilterParams[];
        filterRender: ColumnFilterRenderOptions;
        cellType: string;
        cellRender: ColumnCellRenderOptions;
        editRender: ColumnEditRenderOptions;
        contentRender: ColumnContentRenderOptions;

        id: string;
        parentId: string;
        level: number;
        rowSpan: number;
        colSpan: number;
        visible: boolean;
        halfVisible: boolean;
        defaultVisible: any;
        checked: boolean;
        halfChecked: boolean;
        disabled: boolean;
        order: string;
        renderWidth: number;
        renderHeight: number;
        resizeWidth: number;
        model: {
          update: boolean;
          value: any;
        };
        children: ColumnInfo[];

        getTitle(): string;
        [key: string]: any;
      }
     * ```
     * @public
     */
    column: {
      type: Object,
      default: () => {}
    },
    /**
     * 列的编辑组件配置
     * ```json
     * {
          "field": "status",
          "type": "switch",
          "props": {},
          "extra": {}
        }
     * ```
     */
    config: {
      type: Object,
      default: () => {}
    },
    /**
     * 表单对象
     * @public
     */
    form: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      initForm: {},
      value: '',
      col: {
        span: 24
      }
    };
  },
  computed: {
    items() {
      let config = cloneJson(this.config);
      if (config.constructor === Array) {
        return config.map((item) => {
          if (!item.field) {
            item.field = this.column.property;
          }
          if (item.value === undefined) {
            item.value = null;
          }
          return item;
        });
      } else {
        if (!config.field) {
          config.field = this.column.property;
        }
        if (config.value === undefined) {
          config.value = null;
        }
        return [config];
      }

    },

  },
  watch: {
    form: {
      handler (form) {
        let newForm = {};
        if (form === undefined) {
          let column = this.column;
          newForm[column.property] = null;
        } else {
          newForm = cloneJson(form);
        }
        this.initForm = newForm;
      },
      immediate: true
    },
  },
  methods: {
    /**
     * 确认编辑,将值传回父组件并关闭
     * @public
     */
    confirm () {
      this.$emit('change', this.initForm);
      this.$refs.popover.doClose();
    },
    /**
     * 取消批量编辑,直接关闭
     * @public
     */
    cancel () {
      // let form = this.initForm
      // if (typeof form === 'object') {
      //     for (let i in form) {
      //         form[i] = null
      //     }
      // }
      // this.$emit('change', form)
      this.$refs.popover.doClose();
    },
    /**
     * 更新表单其他值
     * @param {object} data {表单字段1:对应值,表单字段2: 对应值}
     * @public
     */
    handleUpdateField (data) {
    },
    /**
     * 值更新
     * @param {object} obj 值对象{field: 字段, value: 值}
     * @public
     */
    handleValueChange (obj) {
      let form = this.initForm;
      if (obj.field) {
        let val = obj.value;
        if (this.valueType === 'number') {
          val = obj.value !== '' && obj.value !== null && !isNaN(obj.value) ? this.toNumber(obj.value) : obj.value;
        }
        form[obj.field] = val;
      }
    },
    /**
     * 将字符串数字转为数字类型
     * @public
     */
    toNumber (number) {
      if(parseInt(number) === number) {
        return parseInt(number);
      }
      return parseFloat(number);
    }
  }
};
</script>

<style lang="scss" scoped>
    $fontSize: var(--font-size);
    .batch-icon{
        font-size: $fontSize;
    }
    .batch-edit-block{
        .footer{
            margin-top: 10px;
        }
    }

</style>
